@import '../../styles/base.scss';
@import '../../styles/style.scss';

.markdownBox {
  padding: 30px;
  font-size: 18px;
  word-break: break-all;
  height: 100%;
  overflow-y: auto;
  @extend .scroll;

  h2,
  h3,
  h4,
  h5 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #000;
    font-weight: 700;
  }
  h5 {
    font-size: 22px;
  }
  h4 {
    font-size: 24px;
  }
  h3 {
    font-size: 26px;
  }
  h2 {
    font-size: 28px;
  }
  h2:before {
    content: '✒️';
  }
  h3:before {
    content: '✏️';
  }
  h4:before {
    content: '📌';
  }
  h5:before {
    content: '🏷️';
  }

  p {
    margin-bottom: 20px;
  }

  strong {
    color: $themeColor3;
  }
  code {
    background-color: #c8e4ff;
    font-family: 'dengxian';
    padding: 1px 6px;
    border-radius: 4px;
    margin: 0 2px;
  }

  p img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 4px;
  }

  blockquote {
    background-color: #eaf6ff;
    padding: 14px 40px;
    font-size: 18px;
    border-radius: 4px;
    border: 2px $themeColor3_light dashed;
  }
  blockquote p {
    margin: 0;
  }

  table {
    margin: 20px auto;
    border: 1px solid $themeColor3_light;
    background-color: #eaf6ff;
    border-spacing: 0; /*去掉单元格间隙*/
    text-align: center;
  }
  table th,
  table td {
    padding: 6px 14px !important;
    border: 1px solid $themeColor3_light;
  }

  a {
    font-weight: 700;
    text-decoration: underline !important;
    margin: 0 4px;
    color: $themeColor3;
    @extend .trans;
  }
  a:hover {
    color: red;
  }

  hr {
    margin: 20px 0;
  }
}
